<template>
  <!-- 产品资料页面 -->
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u--input
              customStyle="height:100%;width: 90%;margin: auto;"
              placeholderStyle="color: #fff;"
              placeholder="搜索"
              border="none"
              color="#fff"
              shape="circle"
              v-model="search"
              @confirm="searchChange"
            >
              <clIcon
                slot="prefix"
                type="icon-sousuo_o"
                color="#fff"
                size="25"
              ></clIcon>
              <clIcon
                slot="suffix"
                @click="btnIconClick"
                type="icon-saoma"
                color="#fff"
                size="20"
              ></clIcon>
            </u--input>
          </view>
        </template>
      </view>
    </hx-navbar>
    <!-- 选择框 -->
    <view class="nav-view flex m-t-130">
      <view class="nav-item flex" @click="onFilter('all')">
        <template v-if="sortType == 'all' && isAllShow">
          <text class="p-r-10 blue">{{ allText }}</text>
          <u-icon name="arrow-up-fill" size="8" color="#409eff"></u-icon>
        </template>
        <template v-else>
          <text class="p-r-10">{{ allText }}</text>
          <u-icon name="arrow-down-fill" size="8" color="#999"></u-icon>
        </template>
      </view>
      <view class="nav-item flex" @click="onFilter('sort')">
        <template v-if="sortType == 'sort' && isAllShow">
          <text class="p-r-10 blue">{{ sortText }}</text>
          <u-icon name="arrow-up-fill" size="8" color="#409eff"></u-icon>
        </template>
        <template v-else>
          <text class="p-r-10">{{ sortText }}</text>
          <u-icon name="arrow-down-fill" size="8" color="#999"></u-icon>
        </template>
      </view>
    </view>
    <!-- list列表 -->
    <u-list class="ulist" @scrolltolower="scrolltolower">
      <u-list-item v-for="(item, index) in goodSpuDataArr" :key="index">
        <liu-swipe-action
          ref="liuSwipeAction"
          :index="index"
          @clickItem="liuclickItem"
        >
          <view class="list-item" @click="clickItem(item)">
            <view class="img-view">
              <u-avatar
                shape="square"
                size="65"
                :src="
                  item.url || '../../../../../static/my/images/my_65_66.png'
                "
              ></u-avatar>
            </view>
            <view class="con-view">
              <view class="icon-view">
                <clIcon
                  class="m-t-30"
                  type="icon-caidan"
                  color="#999"
                  size="20"
                ></clIcon>
              </view>
              <view class="name">
                {{ item.code }}  {{ item.name }}
              </view>
              <view class="flex tags-view">
                <view class="flex tag-col">
                  <view class="tag"> 剪样 </view>
                  <text
                    class="f-30"
                    >￥{{
                      calculateCutSample(item.cutSampleMin, item.cutSampleMax)
                    }}</text
                  >
                  <text>/米</text>
                </view>
                <view class="flex tag-col">
                  <view class="tag"> 大货 </view>
                  <text
                  class="f-30"
                    >￥{{
                      calculateNormal(item.normalMin, item.normalMax)
                    }}</text
                  >
                  <text>/米</text>
                </view>
              </view>
              <view class="flex bot-nav">
                <view class="bot-item">
                  <text class="grey">销售</text
                  ><text class="p-l-10">8.2万</text>
                </view>
                <view class="bot-item">
                  <text class="grey">浏览</text><text class="p-l-10">0</text>
                </view>
                <view class="bot-item">
                  <text class="grey">收藏</text><text class="p-l-10">0</text>
                </view>
              </view>
            </view>
          </view>
          <u-gap bgColor="#eee" height="1"></u-gap>
        </liu-swipe-action>
      </u-list-item>
      <u-loadmore
        dashed
        line
        :status="status"
        loadingText="努力加载中"
        loadmoreText="轻轻上拉"
        nomoreText="实在没有了"
      />
    </u-list>

    <!-- 全部、综合选择弹框 -->
    <u-popup class="popup-view" :show="isAllShow" mode="top" @close="onClose">
      <view class="m-t-300">
        <view class="ul-view">
          <view
            class="li-item"
            :class="{ blue: item.value == active }"
            v-for="(item, index) in allList"
            :key="index"
            @click="onCheck(item)"
          >
            <text>{{ item.label }}</text>
            <u-icon
              name="checkbox-mark"
              color="#409eff"
              v-if="item.value == active"
            ></u-icon>
          </view>
        </view>
      </view>
    </u-popup>

    <u-popup
      class="sidebar"
      :show="productPopShow"
      @close="productPopShow = false"
      @open="productPopOpen"
      mode="right"
      :safeAreaInsetTop="productPopShow"
      overlayStyle="{z-index: '1',background: 'rgba(0, 0, 0, 0.1)'}"
      customStyle="{z-index: '1',background: 'rgba(0, 0, 0, 0.1)'}"
      :overlay="overlay"
    >
      <view style="margin-top: 83%">
        <clCell :list="cellList" @change="uCell"></clCell>
      </view>

      <view class="pos pos-lb flex" style="width: 100%; padding: 0 20rpx 20rpx">
        <u-button
          shape="circle"
          type="primary"
          size="small"
          plain
          text="重置"
          class="m-r-10"
          @click="onReset"
        ></u-button>
        <u-button
          shape="circle"
          type="primary"
          size="small"
          text="搜索"
          @click="searchChange"
        ></u-button>
      </view>
    </u-popup>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import liiySizer from "@/components/liiy-sizer/liiy-sizer.vue";
import { getData, delectData } from "@/apis/bill/information/product";
import clCell from "@/components/cl-cell/cl-cell.vue";
import "../../../../../static/my/images/my_65_66.png";

export default {
  data() {
    return {
      overlay: true,
      productPopShow: false,
      config: {
        title: "产品资料",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
          {
            key: "btn2",
            icon: "&#xe888;",
            position: "left",
          },
        ],
      },
      isAllShow: false,
      allList: [],
      active: 0,
      allText: "全部",
      sortText: "综合",
      sortType: "",
      filterList: [
        {
          id: 0,
          name: "综合",
          sort: false,
        },
        {
          id: 1,
          name: "日期",
          sort: true,
        },
        {
          id: 2,
          name: "销售",
          sort: true,
        },
        {
          id: 3,
          name: "价格",
          sort: true,
        },
        {
          id: 4,
          name: "浏览",
          sort: true,
        },
        {
          id: 5,
          name: "收藏",
          sort: true,
        },
      ],
      goodSpuData: {},
      goodSpuDataArr: [],
      pages: {
        current: 1,
        size: 10,
      },
      search: null,
      cellList: [
        {
          name: "类别",
          value: "1",
          icon: "icon-buttomarrow",
          router: "",
        },
        {
          name: "季度",
          value: "1",
          icon: "",
          router: "",
        },
        {
          name: "工艺",
          value: "1",
          icon: "",
          router: "",
        },
        {
          name: "偏好设置",
          value: "",
          icon: "",
          router: "",
        },
      ],
      isJump: null, //控制点击列表是跳转回去还是跳转到详情 true == 回去  其他 == 详情
      status: "loadmore",
    };
  },
  components: {
    clIcon,
    liiySizer,
    clCell,
  },
  onLoad() {
    if (this.$Route.query.isJump) {
      this.isJump = this.$Route.query.isJump;
    }
  },
  onShow() {
    this.pages.current = 1;
    this.goodSpuDataArr = []
    this.initData();
  },
  created() {
    // #ifdef H5
    // 监听扫码结果
    window["getScanData"] = (sn) => {
      // alert(sn)
      // this.onAppScanConfirm(sn)
      this.search = sn;
      this.searchChange();
    };
    // #endif
  },
  methods: {
    calculateCutSample(min, max) {
      if (!min && !max) {
        return 0;
      }
      if (min === max) {
        return max;
      }
      return min + "-" + max;
    },
    calculateNormal(min, max) {
      if (!min && !max) {
        return 0;
      }
      if (min === max) {
        return max;
      }
      return min + "-" + max;
    },
    btnIconClick() {
      // #ifdef H5
      window.NativeApp.scan();
      // #endif
      // #ifndef H5
      uni.scanCode({
        success: (params) => {
          console.log("params", params);
        },
        fail: () => {
          uni.showToast({
            title: "扫码失败",
          });
        },
      });
      // #endif
    },

    onReset() {
      this.goodSpuDataArr = [];
      this.pages.current = 1;
      this.initData();
    },
    // 侧拉框选择按钮
    liuclickItem(item) {
      console.log("[ item ] >", item);
      // 编辑
      if (item.id == 1) {
        this.$refs.liuSwipeAction[item.index].reset();
        this.$Router.push({
          path: "/pages/application/pages/information/product-information/detail/index",
          query: {
            id: this.goodSpuDataArr[item.index].id,
          },
        });
        this.show = true;
      } else if (item.id == 2) {
        // 删除
        this.$refs.liuSwipeAction[item.index].reset();
        this.deleteByIdQuarterData(
          this.goodSpuDataArr[item.index].id,
          item.index
        );
      }
    },
    deleteByIdQuarterData(id, index) {
      let _this = this;
      uni.showModal({
        title: "提示",
        content: "确认删除",
        success: function (res) {
          if (res.confirm) {
            delectData([id]).then((res) => {
              if (!res.data.flag) {
                _this.$refs.uToast.show({
                  type: "error",
                  title: "",
                  message: res.data.message,
                });
                return;
              }
              const data = res.data.data || {};
              _this.$refs.uToast.show({
                type: "success",
                title: "",
                message: "删除成功",
              });
              _this.goodSpuDataArr.splice(index, 1);
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
    // 选择
    onCheck(val) {
      this.active = val.value;
      if (this.sortType == "all") {
        this.allText = val.label;
      } else {
        this.sortText = val.label;
      }
      this.isAllShow = false;
    },
    onFilter(val) {
      this.isAllShow = !this.isAllShow;
      this.sortType = val;
      switch (val) {
        case "all":
          this.allList = [
            {
              label: "全部",
              value: 0,
            },
            {
              label: "成品",
              value: 1,
            },
            {
              label: "坯布",
              value: 2,
            },
            {
              label: "已上架",
              value: 3,
            },
            {
              label: "已下架",
              value: 4,
            },
            {
              label: "已停用",
              value: 5,
            },
          ];
          break;
        case "sort":
          this.allList = [
            {
              label: "综合",
              value: 0,
            },
            {
              label: "日期升序",
              value: 1,
            },
            {
              label: "日期降序",
              value: 2,
            },
            {
              label: "销售升序",
              value: 3,
            },
            {
              label: "销售降序",
              value: 4,
            },
            {
              label: "价格升序",
              value: 5,
            },
            {
              label: "价格降序",
              value: 6,
            },
            {
              label: "上架升序",
              value: 7,
            },
            {
              label: "上架降序",
              value: 8,
            },
            {
              label: "浏览升序",
              value: 9,
            },
            {
              label: "浏览降序",
              value: 10,
            },
            {
              label: "收藏升序",
              value: 11,
            },
            {
              label: "收藏降序",
              value: 12,
            },
          ];
          break;
      }
    },
    onClose() {
      this.isAllShow = false;
    },
    clickItem(item) {
      if (this.isJump) {
        uni.$emit("productInformation", item);
        this.$Router.back();
      } else {
        this.$Router.push({
          path: "/pages/application/pages/information/product-information/detail/detail",
          query: {
            id: item.id,
          },
        });
      }
      // console.log("所点击的列表索引：", item);
    },
    // 回调函数
    uCell(item) {
      console.log("item", item);
    },
    productPopOpen() {},
    // 搜索功能
    searchChange() {
      this.goodSpuDataArr = [];
      this.pages.current = 1;
      this.initData();
    },
    // 获取数据
    initData() {
      // 1. 查询列表信息
      let _this = this;
      let billId = {
        data: {
          isEnable: true,
          keywords: this.search,
        },
        page: {
          current: _this.pages.current,
          size: _this.pages.size,
          sort: "",
          order: "desc",
          total: 0,
          orders: [
            {
              column: "create_time",
              asc: false,
            },
          ],
        },
      };
      uni.showLoading({
        title: "加载中",
      });
      // console.log("billId", billId);
      getData(billId).then((res) => {
        if (!res.data.flag) return;
        const data = res.data.data || {};
        uni.hideLoading();
        if (data.records.length <= 10) {
          this.status = "nomore";
        } else {
          this.status = "loadmore";
        }
        this.goodSpuDataArr = [...this.goodSpuDataArr, ...data.records];
        // this.goodSpuData = data
      });
      uni.hideLoading();
    },
    scrolltolower(e) {
      this.pages.current++;
      this.initData();
      // 到底了
    },
    clickBtn(item) {
      // console.log("index", item);
      if (item.key === "btn1") {
        // pages/application/pages/information/product-information/detail/index
        this.$Router.push({
          name: "applicationDetail",
        });
      } else if (item.key === "btn2") {
        this.productPopShow = !this.productPopShow;
      }
    },
    handleFilterItem(index, desc, item) {
      // console.log(index, desc, item);
    },
    showDrawer() {},
  },
};
</script>

<style lang="scss" scoped>
.zero-filter-bar {
  position: absolute;
  top: 15%;
  left: 1%;
}

.ulist {
  position: absolute;
  top: 300rpx;
  z-index: 1;
  // display: none;
}

.u-nav-slot {
  display: flex;
}

.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}

// list style
.list-item {
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;

  .img-view {
    padding-right: 20rpx;
  }

  .con-view {
    flex: 1;
    position: relative;

    .icon-view {
      position: absolute;
      right: 0;
    }

    .name {
      color: #000;
      padding-bottom: 14rpx;
      font-size: 28rpx;
    }

    .tags-view {
      padding-bottom: 14rpx;
      font-size: 20rpx;

      .tag-col {
        flex: 1;
        color: #d76800;
        font-size: 20rpx;
        align-items: center;

        .tag {
          background-color: #d76800;
          color: #fff;
          padding: 2rpx 8rpx;
          border-radius: 8rpx;
        }

        &:last-child {
          color: #f00;

          .tag {
            background-color: #f00;
          }
        }
      }
    }

    .bot-nav {
      justify-content: space-between;
      font-size: 20rpx;
      color: #333;
    }
  }
}

.nav-view {
  overflow: hidden;
  background: #fff;
  padding: 20rpx 0;
  justify-content: space-around;
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 2;

  .nav-item {
    font-size: 28rpx;
  }
}

.popup-view {
  position: fixed;
  z-index: 1;

  .ul-view {
    .li-item {
      display: flex;
      padding: 16rpx 20rpx;
      justify-content: space-between;
      border-top: 1rpx solid #eee;
    }
  }
}
</style>